<template>
  <mu-container>
    <mu-appbar
      class="header_title"
      style="width: 100%; margin-bottom: 15px"
      title="商品清单"
      color="#d81b60"
    ></mu-appbar>
    <div style="width: 100%; margin-bottom: 35px">
      <mu-list class="list" v-for="item in progressData" :key="item.id">
        <mu-list-item>
          <mu-list-item-title>
            <mu-linear-progress
              mode="determinate"
              :value="item.goodsNum"
              :size="16"
              color="blue"
            ></mu-linear-progress>
          </mu-list-item-title>
        </mu-list-item>
        <span class="list_icon">
          <p class="list_name">{{ item.goodsName }}</p>
          <mu-icon size="20" value="arrow_downward"></mu-icon>
        </span>
        <p class="list_id">商品编号：{{ item.id }}</p>
        <p class="list_desc">当前价格：{{ item.goodsPrice }}元</p>
        <p class="list_num">商品库存：{{ item.goodsNum }}个</p>
        <mu-button color="secondary" small @click="submitOrder(item)"
          >提交订单</mu-button
        >
      </mu-list>
    </div>
    <mu-dialog :open.sync="dialogOpen" title="订单详情" :maxWidth="400">
      <!-- 对话框的内容放在这里 -->
      <span class="list_icon">
        <p class="list_name">{{ goodsToBuy.goodsName }}</p>
      </span>
      <p class="list_desc">当前价格：{{ goodsToBuy.goodsPrice }}元</p>
      <p class="list_num">商品库存：{{ goodsToBuy.goodsNum }}个</p>
      <mu-icon class="list_icon" size="20" value="arrow_downward"></mu-icon
      ><br />
      <mu-select
        v-model="selectedValue"
        label="请选择购买的数量"
        ref="multiSelect"
      >
        <mu-list>
          <mu-list-item
            v-for="option in options"
            :key="option.value"
            :value="option.value"
            @click.native="changeSelectedValue(option.value)"
            >{{ option.label }}</mu-list-item
          >
        </mu-list>
      </mu-select>
      <br />
      <mu-button color="secondary" small @click="makeOrder">确定</mu-button>
      &emsp;
      <mu-button color="primary" small @click="closeDialog">取消</mu-button>
    </mu-dialog>
  </mu-container>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      progressData: [],
      dialogOpen: false,
      goodsToBuy: {},
      selectedValue: 0,
      options: [],
    };
  },
  methods: {
    submitOrder(item) {
      console.log(item);
      this.goodsToBuy = item;
      this.options = [];
      for (let i = 1; i <= item.goodsNum; i++) {
        this.options.push({ value: i, label: i });
      }
      this.dialogOpen = true;
    },
    changeSelectedValue(value) {
      this.selectedValue = value;
      this.$refs.multiSelect.blur();
    },
    makeOrder() {
      if (this.selectedValue === 0) {
        this.$toast.warning("请先选择好要购买的数量！");
        return;
      }
      let user = JSON.parse(localStorage.getItem("user"));
      let order = {
        userId: user.id,
        goodsId: this.goodsToBuy.id,
        buyNum: this.selectedValue,
      };
      console.log(order);
      this.$axios({
        method: "post",
        url: "/easyshop/addOrder",
        params: null,
        data: order,
      })
        .then((res) => {
          // console.log(res.data);
          let resData = res.data;
          if (resData.code === 200) {
            // 刷新goodsList
            this.getGoodsList();
            this.$toast.success("订单生成完毕!请在5分钟内完成订单处理,超过5分钟会自动取消订单");
          } else {
            this.$toast.error(resData.message);
          }
          this.dialogOpen = false;
          this.selectedValue = 0;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeDialog() {
      this.dialogOpen = false;
      this.options = [];
    },
    getGoodsList() {
      // 获得全部商品
      this.$axios({
        method: "get",
        url: "/easyshop/list",
        params: null,
        data: null,
      })
        .then((res) => {
          // console.log(res.data);
          let resData = res.data;
          if (resData.code === 200) {
            this.progressData = resData.data.goodsList;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.$parent.showNav = true;
    this.getGoodsList();
  },
};
</script>

<style lang="less">
.list {
  margin-top: -1px;
  border: 1px solid #ccc;
  padding-top: 5px;
}
.list_name {
  font-size: 20px;
  font-weight: 600;
  color: rgb(240, 49, 16);
}
.list_id {
  font-size: 14px;
  font-weight: 600;
  color: rgb(188, 86, 235);
}
.list_desc {
  font-size: 14px;
  font-weight: 600;
  color: rgb(86, 168, 235);
}
.list_num {
  font-size: 14px;
  font-weight: 600;
  color: rgb(89, 180, 61);
}
</style>